<template>
	<view class="content">
		<u-popup :show="show" @close="close" :round="10" :closeOnClickOverlay="true" :zIndex="10070">
			<view class="mainpadding">
				<view class="titletext textcenter">筛选</view>
				<view class="margin_top strongtext">时间</view>
				<view class="flexleft flex_wrap">
					<view class="flexcenter sanshi margin_top2" v-for="item in timeList" :key="item.id" @click="changesj(item.id)">
						<view :class="item.id==selecttime?'haungsebtn':'huisebtn'">
							{{item.name}}
						</view>
					</view>
				</view>
				<!-- 时间 -->
				<view class="margin_top strongtext">自定义时间</view>
				<view class="flexcenter margin_top2" @click="zdysj">
					<view class="shijianbtn margin_right3" @click="zshijian">{{startime}}</view>
					<view class="xian margin_right3"></view>
					<view class="shijianbtn" @click="yshijian">{{endtime}}</view>
				</view>
				<u-datetime-picker :show="zshow" @confirm="zconfirm" v-model="value1" mode="date"
					@cancel="zshow= false"></u-datetime-picker>
				<u-datetime-picker :show="yshow" @confirm="yconfirm" v-model="value2" mode="date" @cancel="yshow= false"
					:minDate="mindate"></u-datetime-picker>
				<view class="flexbetween">
					<view class="resetbtn margin_top" @click="reset()">重置</view>
					<view class="surebtn margin_top" @click="close(1)">确认</view>
				</view>
			</view>
		</u-popup>
		<view class="header">
			<view class="header_txt">您是尊贵的{{personInfo.area_dl_text}}代理！</view>
			<view class="big flexbetween">
				<view class="child">
					<view class="top_txt">总新增</view>
					<view class="bottom_num">{{datainfo.tr_price}}</view>
				</view>
				<view class="child">
					<view class="top_txt">总复购</view>
					<view class="bottom_num">{{datainfo.fg_price}}</view>
				</view>
			</view>
		</view>
		<view class="center">
			<view class="c_header flexbetween">
				<view class="c_txt">
					<view class="txt">业绩明细</view>
					<view class="line"></view>
				</view>
				<view class="c_sx flexleft" @click="show=true">
					<view class="sx_txt">筛选</view>
					<view class="xiajiantou"></view>
				</view>
			</view>
			<view class="zwtimg flexcenter" v-if="!list.data.length">
				<image src="../../static/image/system/zwt.png" mode=""></image>
			</view>
			<view class="yj_list" v-if="list.data.length">
				<view class="yj_child" v-for="item in list.data" :key="item.id">
					<view class="c_code">订单编号：{{item.order.order_no}}</view>
					<view class="c_center flexleft">
						<view class="headimg">
							<image :src="item.user.avatar_text" mode=""></image>
						</view>
						<view class="info">
							<view class="name">{{item.user.nickname}}</view>
							<view class="time">{{item.createtime_text}}</view>
						</view>
					</view>
					<view class="data flexaround">
						<view class="new">新增：<text style="color: #FF0000;">{{item.price}}</text></view>
						<view class="rebuy">复购：<text style="color: #FF0000;">{{item.integral_price}}</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show:false,
				
				// 筛选
				timeList: [{
						id: 1,
						name: "今日"
					},
					{
						id: 2,
						name: "昨日"
					},
					{
						id: 3,
						name: "本月"
					},
					{
						id: 4,
						name: "上月"
					}
				],
				// 时间
				startime: "开始时间",
				endtime: "结束时间",
				// 数据列表
				show: false,
				mindate: "",
				//开始时间
				zshow: false,
				value1: Number(new Date()),
				//结束
				yshow: false,
				value2: Number(new Date()),
				selecttime:0,
				personInfo:{
					cityinfo:"",
					area_dl_text:"",
				},
				datainfo:{
					tr_price:"",
					fg_price:""
				},
				page: 1,
				limit: 12,
				list: {
					data: []
				},
			}
		},
		onLoad() {
			this.getinfo()
			this.getareaDIData()
			this.init()
		},
		methods: {
			// 热门推荐列表
			init(isPage, page) {
				let _this = this;
				httpRequest.request("/api/user/areaDlMx", 'POST', {
					start_time: this.startime=="开始时间"?'':this.startime,
					end_time: this.endtime=="结束时间"?'':this.endtime,
					sx_type: this.selecttime, //筛选类型
					page: page || 1,
					limit: this.limit,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			getinfo(){
				httpRequest.request('/api/user/index', 'POST', {}, false, false, true).then(res => {
					if (res.code == 1) {
						this.personInfo = res.data
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
				
			},
			getareaDIData(){
				httpRequest.request('/api/user/areaDlData', 'POST', {
					start_time: this.startime=="开始时间"?'':this.startime,
					end_time: this.endtime=="结束时间"?'':this.endtime,
					sx_type: this.selecttime, //筛选类型
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.datainfo = res.data
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 时间转换
			changesj(id){
				this.mindate = ""
				this.selecttime = id
				this.startime = "开始时间"
				this.endtime = "结束时间"
			},
			// 选择时间段
			selecTimeBtn(id) {
				this.mindate = ""
				this.selecttime = id
				this.startime = "开始时间"
				this.endtime = "结束时间"
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day
			
				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			zdysj() {
				this.selecttime = 0
			},
			// 开始时间
			zconfirm(e) {
				console.log(e)
				this.mindate = e.value
				this.startime = this.date(e.value)
				this.zshow = false
			},
			zshijian() {
				this.zshow = true
			},
			//结束时间
			yconfirm(e) {
				console.log(e)
				this.endtime = this.date(e.value)
				this.yshow = false
			},
			yshijian() {
				if (this.mindate == "") {
					httpRequest.toast("请选择开始时间")
					return
				}
				this.yshow = true
			},
			reset(){
				this.startime = "开始时间"
				this.endtime = "结束时间"
				this.selecttime = 0
				this.show = false
				this.init()
				this.getareaDIData()
			},
			close(value) {
				if(value==1){
					this.init()
					this.getareaDIData()
				}
				this.show = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.pop{
		padding: 0 60rpx 60rpx;
		.title{
			text-align: center;
			font-size: 34rpx;
			color: #000000;
			padding: 30rpx 0 20rpx;
		}
		.timer{
			.timer_head{
				font-size: 30rpx;
				color: #000000;
				font-weight: bold;
				padding: 20rpx 0;
			}
			.timer_childs{
				flex-wrap: wrap;
				.t_child{
					width: 30%;
					margin: 10rpx;
					background-color: #F7F9FA;
					color: #999999;
					padding: 20rpx 0;
					text-align: center;
					border-radius: 40rpx;
				}
				.lan{
					background-color: #E8F0FF;
					color: #1769FF;
				}
			}
		}
		.zdytime{
			.zdytime_head{
				font-size: 30rpx;
				color: #000000;
				font-weight: bold;
				padding: 20rpx 0;
			}
			.timer_childs{
				flex-wrap: wrap;
				.t_child{
					width: 42%;
					margin: 10rpx;
					background-color: #F7F9FA;
					color: #999999;
					padding: 20rpx 0;
					text-align: center;
					border-radius: 40rpx;
				}
				.line{
					width: 30rpx;
					height: 4rpx;
					background-color: #F7F9FA;
				}
			}
		}
		.submit{
			width: 40vw;
			background-image: linear-gradient(to right,#FFC059,#FEB43A);
			border-radius: 40rpx;
			text-align: center;
			padding: 20rpx 0;
			color: #FFFFFF;
			font-size: 32rpx;
			margin: 30rpx 0;
		}
	}
	.content{
		overflow: hidden;
		background-color: #FAFAFA;
		min-height: 100vh;
		.header{
			padding: 0 30rpx;
			margin: 20rpx 0;
			.header_txt{
				color: #333333;
				font-size: 24rpx;
				font-weight: bold;
			}
			.big{
				margin-top: 30rpx;
				.child{
					background-color: #fff;
					padding: 36rpx 0;
					width: 46%;
					.top_txt{
						text-align: center;
						color: #999999;
						font-size: 24rpx;
						margin-bottom: 20rpx;
					}
					.bottom_num{
						text-align: center;
						color: #000000;
						font-size: 34rpx;
						font-weight: bold;
					}
				}
			}
		}
		.center{
			margin: 0 30rpx;
			.c_header{
				.c_txt{
					.txt{
						color: #000000;
						font-size: 32rpx;
						font-weight: bold;
					}
					.line{
						width: 128rpx;
						height:10rpx;
						margin-top: -6rpx;
						background-size: 100% 100%;
						background-image: url('../../static/image/system/line.png');
					}
				}
				.c_sx{
					.sx_txt{
						color: #333333;
						font-size: 24rpx;
					}
					.xiajiantou{
						width: 10rpx;
						height:8rpx;
						margin-left: 10rpx;
						background-size: 100% 100%;
						background-image: url('../../static/image/system/youjiantou.png');
					}
				}
			}
			.yj_list{
				margin-top: 20rpx;
				.yj_child{
					padding: 30rpx;
					background-color: #fff;
					border-radius: 10rpx;
					margin-bottom: 30rpx;
					.c_code{
						color: #333333;
						font-size: 24rpx;
						padding-bottom: 20rpx;
						border-bottom: 1rpx dashed rgba(153, 153, 153, .3); 
					}
					.c_center{
						margin-top: 36rpx;
						.headimg{
							width: 126rpx;
							height: 126rpx;
							border-radius: 50%;
							image{
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}
						.info{
							margin-left: 20rpx;
							.name{
								color: #333333;
								font-size: 28rpx;
							}
							.time{
								margin-top: 30rpx;
								color: #333333;
								font-size: 24rpx;
							}
						}
					}
					.data{
						background-color: #F1F1F1;
						border-radius: 20rpx;
						padding: 16rpx 30rpx;
						color: #000000;
						font-size: 24rpx;
						margin-top: 30rpx;
					}
				}
				
			}
		}
	}
	.xian {
		width: 22rpx;
		height: 0rpx;
		background-color: #999999;
		border: 1rpx solid #999999;
	}
	
	.shijianbtn {
		padding: 20rpx 65rpx;
		background: #F7F9FA;
		border-radius: 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	
	.huisebtn {
		width: 198rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		background: #F7F9FA;
		border-radius: 41rpx;
	}
	
	.haungsebtn {
		width: 198rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FAB536;
		background: rgba(250, 181, 54, .1);
		border-radius: 41rpx;
	}
	
	.sanshi {
		width: 33.33%;
	}
	
	.xiahuax {
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.03);
	}
	
	.xiahuax:first-child {
		margin-top: 0rpx;
	}
	
	.xiahuax:last-child {
		padding-bottom: 0rpx;
		border-bottom: none;
	}
	
	.qhtext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	
	.qianshu {
		font-size: 32rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #FAB536;
	}
	
	.ershib1 {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #333333;
	}
	
	.shaxicon {
		width: 12rpx;
		height: 10rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/shaixuan.png');
	}
	
	.zhtext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	
	.banju {
		padding: 30rpx 30rpx 20rpx;
	}
	
	.line {
		width: 100%;
		border: 1rpx solid rgba(255, 255, 255, .1);
	}
	
	.baibtn {
		width: 194rpx;
		height: 65rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		border: 2rpx solid #FFFFFF;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	
	.xbtext {
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	
	.bigbtext {
		font-size: 80rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #FFFFFF;
	}
	
	.toububjt {
		background-size: 100% 100%;
		width: 100%;
		box-sizing: border-box;
		padding: 76rpx 0 20rpx;
		background-image: url('../../static/image/system/jjtb.png');
	}
	.resetbtn{
		width: 45%;
		height: 80rpx;
		color: #fff;
		font-size: 32rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #999;
	}
	.surebtn{
		width: 45%;
		height: 80rpx;
		color: #fff;
		font-size: 32rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #FFC059;
	}
</style>
